<!-- eslint-disable vue/multi-word-component-names -->
 <template>
  <div>
    <div style="margin-bottom: 5px; text-align: center;">
      <el-button 
        type="success" 
        :icon="Search" 
        circle 
        style="margin-left: 5px;" 
        @click="loadPost()"
        v-if="hasAuth('system:log-search')"
      />
      
      <el-button 
        type="danger" 
        :icon="Delete" 
        circle 
        style="margin-left: 5px;" 
        @click="delHandle(null)"
        v-if="hasAuth('system:log-delete')" 
        :disabled="delBtnStatus"
      />
    </div>

    <el-table 
      :data="tableData" 
      ref="multipleTableRef" 
      tooltip-effect="dark" 
      border 
      style="width: 100%;" 
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      
      <el-table-column prop="user" label="操作用户" />
      
      <el-table-column prop="record" label="操作记录" />
      
      <el-table-column prop="type" label="操作类型" />

      <el-table-column 
        prop="createTime" 
        label="操作时间" 
        width="200" 
        :formatter="formatDate"
      />
      
      <el-table-column fixed="right" label="操作" width="250" prop="operate">
        <template #default="scope">
          <div>
            <el-button 
              type="danger" 
              :icon="Delete" 
              circle 
              style="margin-left: 5px;"
              @click="delHandle(scope.row.id)" 
              v-if="hasAuth('system:log-delete')"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    
    <el-pagination 
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :current-page="pageNum"
      :page-sizes="[5, 20, 50, 100]" 
      :page-size="pageSize" 
      background
      layout="total,sizes,prev, pager, next,jumper" 
      :total="total"
    />
  </div>
</template>

<script setup>
// eslint-disable-next-line vue/multi-word-component-names
import { ref, onMounted, computed } from 'vue'
import { Search, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Store } from '@/store/index'
import api from '@/axios/index'

// 获取 store 实例
const store = Store()

// refs
const multipleTableRef = ref()

// 数据响应式
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(5)
const tableData = ref([])
const delBtnStatus = ref(true)
const multipleSelection = ref([])

// 计算属性
const hasAuth = computed(() => {
  return function (perm) {
    return store.permList.includes(perm)
  }
})

// 方法
const loadPost = () => {
  api.post("/log/listPage", {
    pageSize: pageSize.value,
    pageNum: pageNum.value,
    param: {}
  }).then((res) => {
    console.log(res)
    if (res.code == 200) {
      tableData.value = res.data
      if (res.data.length == 0 && pageNum.value != 1) {
        pageNum.value = 1
        loadPost()
      }
      total.value = res.total
    } else {
      ElMessage({
        message: '数据查询失败',
        type: "error"
      })
    }
  })
}

const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`)
  pageNum.value = 1
  pageSize.value = val
  loadPost()
}

const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`)
  pageNum.value = val
  loadPost()
}

const formatDate = (row, column) => {
  let data = row[column.property]
  if (data == null) {
    return null
  }
  let dt = new Date(data)
  return (
    dt.getFullYear() +
    "-" +
    (dt.getMonth() + 1) +
    "-" +
    dt.getDate() +
    " " +
    dt.getHours() +
    ":" +
    dt.getMinutes() +
    ":" +
    dt.getSeconds()
  )
}

const handleSelectionChange = (val) => {
  console.log(val)
  multipleSelection.value = val
  delBtnStatus.value = val.length == 0
}

const delHandle = (id) => {
  console.log(id)
  var ids = []
  if (id) {
    ids.push(id)
  } else {
    multipleSelection.value.forEach(row => {
      ids.push(row.id)
    })
  }
  console.log(ids)
  
  ElMessageBox.confirm('此操作将永久删除日志数据, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    api.post('/log/deleteBatch', ids, {
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      }
    }).then(res => {
      console.log(res)
      ElMessage({
        showClose: true,
        message: '恭喜你，操作成功',
        type: 'success',
        onClose: () => {
          loadPost()
        }
      })
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    })
  })
}

// 生命周期
onMounted(() => {
  loadPost()
})
</script>
<style scoped>
.el-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
</style>